<template>
  <div class="record-wrap">

    <div class="work-list" v-if="showPage == 1">

      <div class="work-box" v-for="(item,index) in applyList" :key="index" @click="openRecruit(item.workId)">
        <div class="work-con">
          <img class="pic-box" :src="item.mechanismUrl" v-if="item.mechanismUrl"/>
          <div class="pic-box" v-else></div>

          <div class="item-box">
            <div class="item-con">
              <span class="work-type">{{item.workTypeName}}</span>
              <span class="work-money" v-if="item.postType == 1">{{item.workMoney}}元/小时</span>
              <span class="work-money" v-if="item.postType == 0">{{item.wageRange}}元/月</span>
            </div>
            <div class="item-con">
              <span class="lend-money" v-if="item.lendType == 1">可借支</span>
              <div class="fee-box" v-if="item.reStatus == 1 && item.reMoney > 0">
                <span class="fee-title">返费</span>
                <span class="fee">{{item.reMoney}}元</span>
              </div>

            </div>
            <div class="item-con">
              <span class="company-name">{{item.mechanismName}}</span>
            </div>
          </div>
        </div>

        <div class="apply-time">
          <span>{{item.time | format}}</span>
          <span>报名成功</span>
        </div>

        <div class="line-box"></div>
      </div>

      <div class="tip-box" v-if="applyList.length > 0">仅显示最近90天报名记录~</div>

    </div>

    <empty-page v-if="showPage == 2"></empty-page>

  </div>
</template>

<script>
  import emptyPage from "../../components/empty"
  import {queryApplyRecord} from "../../axios/api"
  import {formatDate} from "../../config/util"

  export default {
    data() {
      return {
        showPage: 1,
        identity: "",
        applyList: []
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.identity = base64.decode(sessionStorage.getItem("identity"));
      this.queryApplyList();
    },
    methods: {
      queryApplyList() {//查询报名记录
        this.$vux.loading.show({
          text: '加载中',
        });
        let params = {
          "sgin": this.identity
        };
        queryApplyRecord(params).then((res) => {
          this.$vux.loading.hide();
          if (res.data != null && res.data.length > 0) {
            this.showPage = 1;
            this.applyList = res.data;
            console.log(JSON.stringify(this.applyList))
          } else {
            this.showPage = 2;
          }
        });
      },
      openRecruit(id) {//招工详情
        this.$router.push({path: "/workdetail", query: {"id": id, "type": 2}});
      }
    },
    filters: {
      format(time) {
        let date = new Date(time);
        let value = formatDate(date, 'MM-dd hh:mm');
        return `${value.substr(0, 2)}月${value.substr(3, 2)}日` + value.split(' ')[1];
      }
    },
    components: {
      emptyPage
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .record-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .work-list {
      .wh(100%, auto);
      .work-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        .who(100%, 3.467rem, hidden);
        background: @talent-bg-color;
        .work-con {
          display: flex;
          padding-top: 0.32rem;
          .wh(93.6%, 1.8rem);
          padding-bottom: 0.347rem;
          .pic-box {
            margin-right: 0.267rem;
            .wh(2.4rem, 1.8rem);
            .border-radius(0.053rem);
            background: @talent-theme-bg-color;
          }
          .item-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            .item-con {
              display: flex;
              justify-content: space-between;
              &:first-child {
                padding-top: 0.053rem;
                padding-bottom: 0.16rem;
              }
              .work-type {
                .size-color-weight(0.4rem, rgba(51, 51, 51, 1), 500);
              }
              .work-money {
                .size-color-weight(0.4rem, rgba(255, 145, 38, 1), 500);
              }
              &:nth-child(2) {
                padding-bottom: 0.4rem;
              }
              .lend-money {
                .fj(center, center);
                .wh(1.12rem, 0.4rem);
                background: rgba(240, 246, 250, 1);
                .border-radius(0.053rem);
                .size-color(0.293rem, rgba(161, 171, 179, 1));
                line-height: 0.4rem;
              }
              .company-name {
                .size-color(0.347rem, rgba(102, 102, 102, 1));
              }
              .fee-box {
                display: flex;
                margin-left: auto;
                .wh(1.787rem, 0.4rem);
                .fee-title {
                  .wh(0.72rem, 0.4rem);
                  background: rgba(77, 207, 190, 1);
                  border-radius: 0.053rem 0rem 0rem 0.053rem;
                  .size-color(0.293rem, rgba(255, 255, 255, 1));
                  text-align: center;
                  line-height: 0.4rem;
                }
                .fee {
                  text-align: center;
                  line-height: 0.347rem;
                  .wh(1.147rem, 0.347rem);
                  border: 0.027rem solid rgba(77, 207, 190, 1);
                  border-radius: 0rem 0.053rem 0.053rem 0rem;
                  .size-color-weight(0.293rem, rgba(77, 207, 190, 1), 500);
                }
              }
            }
          }
        }
        .apply-time {
          .fj(center, space-between);
          .wh(93.6%, 0.8rem);
          border-top: @talent-border-bottom;
          .size-color(0.32rem, rgba(153, 153, 153, 1));
        }
        .line-box {
          .wh(100%, 0.267rem);
          background: @talent-theme-bg-color;
        }
      }
      .tip-box {
        padding-top: 0.48rem;
        padding-bottom: 0.48rem;
        text-align: center;
        .size-color(0.347rem, rgba(179, 179, 179, 1));
      }
    }
  }
</style>
